<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-12 23:06:46
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 22:26:32
-->
<template>
  <div class="Echarts-container" ref="echartsContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const echartsContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(echartsContainer.value, "dark");
  const option = {
    title: {
      text: "形成里程占比",
    },
    grid: {
      left: "7%",
      right: "7%",
      bottom: "5%",
      top: "17%",
      containLabel: true,
    },
    legend: getLegend(),
    xAxis: {
      type: "category",
      // data: ["0-1", "1-2", "2-3", "3-5", "5-10及以上"],
      //去除刻度
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "rgba(230, 247, 255, 0.50)",
        fontSize: 12,
      },
    },
    yAxis: {
      type: "value",
    },
    tooltip: {},
    series: [
      {
        name: "0-1km",
        data: enerateNormalDistributionData(0, 1, 12.3),
        type: "line",
        smooth: true,
      },
      {
        name: "1-2km",
        data: enerateNormalDistributionData(1, 2, 20.3),
        type: "line",
        smooth: true,
      },
      {
        name: "2-3km",
        data: enerateNormalDistributionData(2, 3, 43.2),
        type: "line",
        smooth: true,
      },
      {
        name: "3-5km",
        data: enerateNormalDistributionData(3, 5, 18.4),
        type: "line",
        smooth: true,
      },
      {
        name: "5km以上",
        data: enerateNormalDistributionData(5, 10, 6.8),
        type: "line",
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
});

//根据最大值构造正太分布的数据
const enerateNormalDistributionData = (
  startNum,
  endNum,
  max,
  numPoint = 100
) => {
  if (startNum == endNum || startNum > endNum) {
    return;
  }
  //根据峰值计算sigma的值
  const sigma = 1 / (Math.sqrt(2 * Math.PI) * max);
  //计算step
  const step = (endNum - startNum) / numPoint;
  //计算最大值对应的x
  const mu = startNum + (endNum - startNum) / 2;
  //循环
  const data = [];
  for (let i = startNum; i < endNum; i += step) {
    const y =
      (1 / Math.sqrt(2 * Math.PI * sigma * sigma)) *
      Math.exp(-0.5 * Math.pow((i - mu) / sigma, 2));
    data.push([i, y]);
  }
  return data;
};

const getLegend = () => {
  return {
    data: ["0-1km", "1-2km", "2-3km", "3-5km", "5km以上"],
    icon: "rect",
    orient: "horizontal",
    left: "right",
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: "#fff",
      fontSize: "12px",
    },
  };
};
</script>
<style scoped>
.Echarts-container {
  height: 205px;
  padding: 10px;
}
</style>
